<template>
    <div class="data-app">
        <section class="clear">
            <div class="common-census app-census fl">
                <div class="c-title">
                    <span>应用统计</span>
                </div>
                <div class="census bgc1">
                    <ul class="clear">
                        <li v-for="(item,index) of appCountData" :key="index">
                            <span class="app-sum">{{item.app_num}}</span>
                            <span class="app-name">{{item.app_type_name}}</span>
                        </li>
                    </ul>
                    <div v-if="appCountData!==undefined&&appCountData.length==0" class="no-data-tips">- 暂无数据 -</div>
                </div>
                <div class="c-title">
                    <span>应用占比</span>
                </div>
                <div class="ratio circle bgc1">
                    <div class="circle-l" v-for="(item,index) of appRateData" :key="index">
                        <div class="container">
                            <div class="data">
                                <el-progress type="circle" color="#08DBFF" :stroke-width="15" :percentage="Math.round(item.percent)"></el-progress>
                            </div>
                            <div class="title">
                                <p>{{item.app_type_name}}</p>
                            </div>
                        </div>
                    </div>
                    <div v-if="appRateData!==undefined&&appRateData.length==0" class="no-data-tips">- 暂无数据 -</div>
                </div>
            </div>
            <div class="app-visit fl">
                <div class="c-title">
                    <span>应用访问总量</span>
                    <template>
                        <el-select class="fr" v-model="totalVisitDayVal" placeholder="选择时间">
                            <el-option v-for="item in totalVisitDays" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </template>
                </div>
                <div class="visit-map bgc1">
                    <lineChart v-if="totalVisitChartFlag==true" id="allvisit-chart" style="width: 100%;height:100%;" :chartData.sync="totalVisitData"></lineChart>
                    <div v-else class="no-data-tips">- 暂无数据 -</div>
                </div>
            </div>
        </section>
        <section class="clear">
            <div class="single-app-visit fl">
                <div class="c-title">
                    <span>单应用访问人次</span>
                    <template>
                        <el-select class="fr" v-model="singleVisitDayVal" placeholder="选择时间">
                            <el-option v-for="item in singleVisitDays" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </template>
                </div>
                <div class="single-visit-map bgc1">
                    <barChart v-if="singleVisitChartFlag==true" id="visits-chart" style="width: 100%;height:100%;" :barChartData.sync="singleVisitData" />
                    <div v-else class="no-data-tips">- 暂无数据 -</div>
                </div>
            </div>

            <div class="visit-top fl">
                <div class="c-title">
                    <span>访问TOP榜</span>
                </div>
                <div class="visit-top-list bgc1">
                    <ul v-if="topVisitData!==undefined&&topVisitData.length>0">
                        <li v-for="(item,index) of topVisitData" :key="index">
                            <div class="visit-item">
                                <p class="visiter" :title="item.app_name">{{item.app_name}}</p>
                                <p class="count">访问量：{{item.visit_num}}</p>
                            </div>
                        </li>
                    </ul>
                    <div v-else class="no-data-tips">- 暂无数据 -</div>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
import lineChart from '../Charts/lineChart'
import barChart from '../Charts/barChart'
import { getPassData, changeSimpleDate } from '../../../assets/js/charts/chartsTool.js'
//折线图默认数据:
const defaultChartData = {
    yAxisName:"",//鼠标hover显示框中显示y轴的名称
    timeTitle: "",//日期区间标题
    dateData: [],//日期数组
    countData: [],//访问量数组
}
//柱状图默认数据:
const defaultBarChart = {
    timeTitle: "",//日期区间
    appTitleData: [],//应用名称数组
    appVisitCount: [],//应用访问数量数组
}
export default {
    components: {
        lineChart,
        barChart
    },
    props: ["platformId"],//上级页面传来的平台id
    data() {
        return {
            appCountData: [],//应用统计
            appRateData: [],//应用占比
            // 应用访问量：
            totalVisitChartFlag: false,//默认不显示总量图表
            totalVisitData: Object.assign({}, defaultChartData),
            totalVisitDays: [
                {
                    value: "2",
                    label: "近3天"
                },
                {
                    value: "6",
                    label: "近7天"
                },
                {
                    value: "29",
                    label: "近30天"
                }
            ],
            totalVisitDayVal: "29",//默认选中三十天
            // 单应用访问人次：
            singleVisitChartFlag: false,//默认不显示单应用人次图表
            singleVisitData: Object.assign({}, defaultBarChart),
            singleVisitDays: [
                {
                    value: "2",
                    label: "近3天"
                },
                {
                    value: "6",
                    label: "近7天"
                },
                {
                    value: "29",
                    label: "近30天"
                }
            ],
            singleVisitDayVal: "29",//默认选中三十天
            topVisitData: [],//top访问榜数据
        };
    },
    created() {
    },
    mounted() {
    },
    watch: {
        //上级页面传来的平台id值
        platformId: {
            handler(a, b) {
                this.getAppCount();
                this.getAppRate();
                this.getTotalVisits();
                this.getSingleVisits();
                this.getTopVisit();
            },
            immediate: true
        },
        //访问总量部分  下拉框选查看不同的天数
        "totalVisitDayVal"(a, b) {
            if (a != b) {
                this.getTotalVisits();
            }
        },
        //单应用访问人次部分  下拉框选查看不同的天数
        "singleVisitDayVal"(a, b) {
            if (a != b) {
                this.getSingleVisits();
            }
        },
    },
    methods: {
        // 获取应用统计数据
        getAppCount() {
            let success = res => {
                if (!is_empty(res.data)) {
                    this.appCountData = res.data.data.filter((item,inx)=>inx<5);
                }
            };
            this.$ajax.get("api/bigdata/app_countdata", {
                params: {
                    platform_id: this.platformId
                },
                func: { success: success }
            });
        },
        // 获取应用占比数据(最多显示5项)
        getAppRate() {
            let success = res => {
                if (!is_empty(res.data) && res.data.data.length > 4) {
                    this.appRateData = res.data.data.slice(0, 5);
                } else {
                    this.appRateData = res.data.data;
                }
            };
            this.$ajax({
                url: "api/bigdata/app_othercount",
                method: "get",
                params: {
                    platform_id: this.platformId
                },
                func: { success: success }
            });
        },
        //获取应用访问总量数据
        getTotalVisits() {
            //先把原有的图表数据清理：
            this.totalVisitChartFlag = false;
            this.totalVisitData = Object.assign({}, deep_clone(defaultChartData) );
            let success = res => {
                if (!is_empty(res.data)) {
                    this.totalVisitData.yAxisName = "访问量";
                    this.totalVisitData.timeTitle = getPassData(this.totalVisitDayVal, "/") + "-" + getPassData(0, "/");//最近7天日期字符串
                    let dataArr = res.data.data;
                    for (let inx in dataArr) {
                        this.totalVisitData.dateData.push(changeSimpleDate(dataArr[inx].key));//日期数组，用于图表横坐标
                        this.totalVisitData.countData.push(dataArr[inx].time_value);//下载量数组，用于图表纵坐标
                    }
                    this.totalVisitChartFlag = true;//显示图表
                }
            };
            this.$ajax({
                url: "api/bigdata/app_visitdata",
                method: "get",
                params: {
                    start_time: getPassData(this.totalVisitDayVal, "-"),
                    end_time: getPassData(0, "-"),
                    page: 1,
                    platform_id: this.platformId
                },
                func: { success: success }
            });
        },
        //获取单应用访问人次数据
        getSingleVisits() {
            //先把原有的图表数据清理：
            this.singleVisitChartFlag = false;
            this.singleVisitData = Object.assign({}, deep_clone(defaultBarChart));
            let success = res => {
                if (!is_empty(res.data)) {
                    this.singleVisitData.timeTitle = getPassData(this.singleVisitDayVal, "/") + "-" + getPassData(0, "/");
                    let dataArr = res.data;
                    dataArr.forEach(item => {
                        this.singleVisitData.appTitleData.push(item.app_name);//图表横坐标
                        this.singleVisitData.appVisitCount.push(item.app_num);//图表纵坐标
                    });
                    this.singleVisitChartFlag = true;//显示图表
                }
            };
            this.$ajax({
                url: "api/bigdata/app_singlevisitdata",
                method: "get",
                params: {
                    start_time: getPassData(this.singleVisitDayVal, "-"),
                    end_time: getPassData(0, "-"),
                    page: 1,
                    platform_id: this.platformId
                },
                func: { success: success }
            });
        },
        //获取访问top榜数据（最多取5项）
        getTopVisit() {
            let success = res => {
                if (!is_empty(res.data) && res.data.length > 4) {
                    this.topVisitData = res.data.slice(0, 5);
                } else {
                    this.topVisitData = res.data;
                }
            };
            this.$ajax({
                url: "api/bigdata/app_topdata",
                method: "get",
                params: {
                    platform_id: this.platformId
                },
                func: { success: success }
            });
        },
    }
};
</script>

